<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>表单2</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<link rel="stylesheet" href="../css/mui.min.css">
		<link rel="stylesheet" href="../css/mui.picker.css">
		<link rel="stylesheet" href="../css/mui.poppicker.css">
		<link rel="stylesheet" href="../css/form.css">
		<style>
			html,
			body {
				background-color: #efeff4;
			}
			
			.mui-bar-nav {
				background: white;
			}
			
			.mui-content {
				margin-top: 30px;
			}
		</style>
		<script>
		document.addEventListener( "plusready", onPlusReady, false );
		function onPlusReady() { 
			
		} 
		</script>
	</head>

	<body>

		<div class="mui-content"  id="localEnvForm" >

			<form class="mui-input-group" id = "form">

				<div class="mui-input-row">
					<label>行政区域</label>
					<input id='showCityPicker3' type="text" class="mui-input-clear" placeholder="点击选择行政区域" readonly="true">
				</div>
				<div style="background: #efeff4;width: 100%;height: 20px;"></div>

				<div id="feedback" class="mui-page feedback">

					<div class="mui-page-content">

						<p>区域介绍</p>
						<div id='image-list' class="row image-list">
							<div class="dynamic_images image">
								<textarea class="form" rows="5" placeholder="请输入区域介绍内容" v-model="des"></textarea>
							</div>
						</div>
					</div>

					<div style="background: #efeff4;width: 100%;height: 20px;"></div>
					<div class="mui-page-content">

						<p>图片</p>
						<div id='image-list' class="row image-list">
							<div class="dynamic_images image">
								<ul>

									<li class="pickimg" v-for="(item, index) in photos" style="margin:5px">
										<div class="image-uploaded" v-if="item.uploaded">√</div>
										<div class="image-close" v-else @click="delphoto(index)">X</div>
										<img :src="item.localurl" data-preview-src="" data-preview-group="1">
									</li>

									<li v-if="photos.length<3" class="pickimg space" style="margin:5px">
										<div class="addBtn" @click="choosePhoto()">
											<i class="mui-icon mui-icon-plusempty" aria-hidden="true"></i>
										</div>
									</li>

								</ul>
							</div>
						</div>
					</div>

				</div>
			</form>
			
			<button @click="submit"  id='submit' type="button" class="mui-btn mui-btn-primary" style="margin-top: 20px;	width: 90%;height: 46px;left: 50%;margin-bottom: 20px;-webkit-transform: translate(-50%);">提交</button>
		</div>

		<script src="../js/resource/mui.js"></script>
		<script src="../js/resource/mui.picker.js"></script>
		<script src="../js/resource/mui.poppicker.js"></script>
		<script src="../js/resource/city.data-3.js"></script>
		<script src="../js/resource/vue.js"></script>
		<script src="../js/resource/axios.js"></script>
		<script src="../js/resource/config.js"></script>
		<script src="../js/localEnvForm.js"></script>
		<script type="text/javascript" charset="utf-8">
		 
		
			(function($, doc) {
				var area = [];
				$.init();
				$.ready(function() {
					axios({
						method: 'POST',
						url: sever + '/areajson',
						params: {},
						responseType: 'json',
					}).then(function(result) {
						area = result.data.data
						var _getParam = function(obj, param) {
						return obj[param] || '';
					};
					
					

					//-----------------------------------------
					//					//级联示例
					var cityPicker3 = new $.PopPicker({
						layer: 4
					});
					cityPicker3.setData(area);
					var showCityPickerButton = doc.getElementById('showCityPicker3');
					showCityPickerButton.addEventListener('tap', function(event) {
						
						cityPicker3.show(function(items) {
							showCityPickerButton.value = _getParam(items[0], 'text') + " " + _getParam(items[1], 'text') + " " + _getParam(items[2], 'text') + " " + _getParam(items[3], 'text');
							localEnvForm.area.push(_getParam(items[0], 'value'))
							localEnvForm.area.push(_getParam(items[1], 'value'))
							localEnvForm.area.push(_getParam(items[2], 'value'))
							localEnvForm.area.push(_getParam(items[3], 'value'))

						});
					}, false);
					})
					
		
				});
			})(mui, document);
		</script>
	</body>

</html>